<!DOCTYPE html>
<!--
 * This file is part of Cockpit.
 *
 * Copyright (C) 2015 Red Hat, Inc.
 *
 * Cockpit is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * Cockpit is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
-->

<html>
<head>
    <title translate="yes">Local Accounts</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../base1/patternfly.css" type="text/css" rel="stylesheet">
    <link href="users.css" type="text/css" rel="stylesheet">
    <script src="../base1/jquery.js"></script>
    <script src="../base1/cockpit.js"></script>
    <script src="../*/po.js"></script>
    <script src="users.js"></script>
</head>
<body class="pf-m-redhat-font page-ct" hidden>

  <div class="modal" id="error-popup" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="error-popup-title"></h4>
        </div>
        <div class="modal-body">
          <p id="error-popup-message"></p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" data-dismiss="modal" translate>Close</button>
        </div>
      </div>
    </div>
  </div>

  <div id="accounts" class="container-fluid" hidden>
    <button class="btn btn-primary accounts-privileged" id="accounts-create" translate="yes" data-container="body" data-placement="right">Create New Account</button>
    <div id="accounts-list">
    </div>
  </div>

  <div id="account-page">

  <div id="account-failure" class="curtains-ct blank-slate-pf" hidden>
    <div class="blank-slate-pf-icon">
      <i class="fa fa-exclamation-circle"></i>
    </div>
    <h1 translate="yes">Account not available or cannot be edited.</h1>
    <ol class="breadcrumb">
        <li><a href="#/" translate>Back to Accounts</a></li>
    </ol>
  </div>

  <div id="account" class="container-fluid" hidden>
    <ol class="breadcrumb">
      <li><a role="link" tabindex="0" translate="yes">Accounts</a></li>
      <li class="active"></li>
    </ol>

    <div class="panel panel-default account-details" id="account-details">
      <div class="panel-heading">
        <div class="pull-right">
          <button translate="yes" class="btn btn-default accounts-privileged" id="account-logout">Terminate Session</button>
          <button translate="yes" class="btn btn-danger accounts-privileged" data-placement="left" id="account-delete">Delete</button>
        </div>
        <span id="account-title"></span>
      </div>
      <div class="panel-body">
        <table class="info-table-ct">
          <tr>
            <th scope="row"><label for="account-real-name" translate="yes">Full Name</label></th>
            <td class="accounts-privileged" id="account-real-name-wrapper"><input id="account-real-name" class="form-control" data-container="body"></td>
          </tr>
          <tr>
            <th scope="row"><label for="account-user-name" translate="yes">User Name</label></th>
             <td><output id="account-user-name"></output></td>
          </tr>
          <tr>
            <th scope="row"><label translate="yes">Roles</label></th>
            <td id="account-roles">
              <div id="account-change-roles-roles">
              </div>
            </td>
          <tr>
            <th scope="row"><label for="account-last-login" translate="yes">Last Login</label></th>
            <td><output id="account-last-login"></output></td>
          </tr>
          <tr>
            <th scope="row"><label for="account-locked" translate="yes">Access</label></th>
            <td>
              <div class="account-column-one">
                <div class="checkbox accounts-privileged" data-container="body">
                  <label>
                    <input type="checkbox" id="account-locked"><span translate="yes">Lock Account</span>
                  </label>
                </div>
              </div>
              <a role="link" tabindex="0" id="account-expiration-button" class="accounts-privileged" data-toggle="modal"
                   data-target="#account-expiration"></a>
            </td>
          </tr>
          <tr>
            <th scrope="row"><label for="account-set-password" translate="yes">Password</label></th>
            <td>
              <div class="account-column-one">
                <button class="btn btn-default accounts-self-privileged" translate="yes" id="account-set-password" data-container="body">Set Password</button>
                <button class="btn btn-default accounts-privileged" translate="yes"
                    id="password-reset-button" data-toggle="modal" data-target="#password-reset"
                    data-container="body">Force Change</button>
              </div>
              <a role="link" tabindex="0" id="password-expiration-button" class="accounts-privileged" data-toggle="modal"
                 data-target="#password-expiration"></a>
            </td>
          </tr>

        </table>
      </div>
    </div>

    <div class="panel panel-default" id="account-authorized-keys">
      <div class="panel-heading">
        <div class="pull-right">
          <button data-toggle="modal"
                  data-target="#add-authorized-key-dialog"
                  data-original-title="Add Public Key"
                  data-placement="left"
                  class="btn btn-primary accounts-self-privileged fa fa-plus"
                  id="authorized-key-add"
                  title=""
                  type="button">
          </button>
        </div>
        <span translate="yes">Authorized Public SSH Keys</span>
      </div>
      <div class="list-group" id="account-authorized-keys-list">
      </div>
    </div>
  </div>

  </div>

  <div class="modal" id="accounts-create-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate="yes">Create New Account</h4>
        </div>
        <div class="modal-body">
          <form class="ct-form">
            <label class="control-label" for="accounts-create-real-name" translate="yes">Full Name</label>
            <input class="form-control" type="text" id="accounts-create-real-name" value=""/>

            <label class="control-label" for="accounts-create-user-name" translate="yes">User Name</label>
            <input class="form-control" type="text" id="accounts-create-user-name" value=""/>

            <label class="control-label" for="accounts-create-pw1" translate="yes">Password</label>
            <input class="form-control check-passwords" type="password" id="accounts-create-pw1" value=""/>

            <label class="control-label" for="accounts-create-pw2" translate="yes">Confirm</label>
            <div class="check-passwords dialog-wrapper">
              <input class="form-control" type="password" id="accounts-create-pw2" value=""/>
              <div id="accounts-create-password-meter" class="progress password-strength-meter">
                <div class="progress-bar"></div>
                <div class="progress-bar"></div>
                <div class="progress-bar"></div>
                <div class="progress-bar"></div>
              </div>
              <div>
                <span id="accounts-create-password-meter-message" class="help-block"></span>
              </div>
            </div>

            <label class="control-label" translate="yes">Access</label>
            <label class="checkbox-inline">
              <input type="checkbox" id="accounts-create-locked" />
              <span translate="yes">Lock Account</span>
            </label>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" translate>Cancel</button>
          <button class="btn btn-primary" id="accounts-create-create" translate>Create</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="account-set-password-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate="yes">Set Password</h4>
        </div>
        <div class="modal-body">
          <form class="ct-form">
            <label class="control-label" for="account-set-password-old" translate="yes">Old Password</label>
            <input class="form-control check-passwords" type="password" id="account-set-password-old"/>

            <label class="control-label" for="account-set-password-pw1" translate="yes">New Password</label>
            <input class="form-control check-passwords" type="password" id="account-set-password-pw1"/>

            <label class="control-label" for="account-set-password-pw2" translate="yes">Confirm New Password</label>
            <div class="check-passwords dialog-wrapper">
              <input class="form-control" type="password" id="account-set-password-pw2" value=""/>
              <div id="account-set-password-meter" class="progress password-strength-meter">
                <div class="progress-bar"></div>
                <div class="progress-bar"></div>
                <div class="progress-bar"></div>
                <div class="progress-bar"></div>
              </div>
              <div>
                <span id="account-set-password-meter-message" class="help-block" hidden></span>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate="yes" data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" id="account-set-password-apply" translate>Set</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal expiration-modal" id="account-expiration" tabindex="-1"
      role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-sm-ct">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate>Account Expiration</h4>
        </div>
        <div class="modal-body">
          <form>
            <table class="form-table-ct">
              <tr>
                <td>
                  <label>
                    <input type="radio" id="account-expiration-never" name="mode" value="never"/>
                    <span translate>Never lock account</span>
                  </label>
                </td>
              </tr>
              <tr>
                <td>
                  <label class="dialog-wrapper">
                    <input type="radio" id="account-expiration-expires" name="mode" value="expires"/>
                    <span id="account-expiration-before"></span>
                    <input type='text' class="form-control size-text-ct" id="account-expiration-input"/>
                    <span id="account-expiration-after"></span>
                  </label>
                </td>
              </tr>
            </table>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" translate>Cancel</button>
          <button class="btn btn-primary" translate>Change</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal expiration-modal" id="password-expiration" tabindex="-1"
      role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-sm-ct">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate>Password Expiration</h4>
        </div>
        <div class="modal-body">
          <form>
            <table class="form-table-ct">
              <tr>
                <td>
                  <label>
                    <input type="radio" id="password-expiration-never" name="mode" value="never"/>
                    <span translate>Never expire password</span>
                  </label>
                </td>
              </tr>
              <tr>
                <td>
                  <label class="dialog-wrapper">
                    <input type="radio" id="password-expiration-expires" name="mode" value="expires"/>
                    <span id="password-expiration-before"></span>
                    <input type='text' class="form-control size-text-ct" id="password-expiration-input"/>
                    <span id="password-expiration-after"></span>
                  </label>
                </td>
              </tr>
            </table>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" translate>Cancel</button>
          <button class="btn btn-primary" translate>Change</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="password-reset" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate>Force password change</h4>
        </div>
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate="yes" data-dismiss="modal">Cancel</button>
          <button class="btn btn-danger btn-primary" translate>Reset</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="account-confirm-delete-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="account-confirm-delete-title"></h4>
        </div>
        <div class="modal-body">
          <div class="checkbox">
            <label>
              <input type="checkbox" id="account-confirm-delete-files">
              <span translate="yes">Delete Files</span>
            </label>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate="yes" data-dismiss="modal">Cancel</button>
          <button class="btn btn-danger" id="account-confirm-delete-apply" translate>Delete</button>
        </div>
      </div>
    </div>
  </div>

  <script id="authorized-keys-tmpl" type="x-template/mustache">
    {{#keys}}
    <div class="list-group-item">
      <div class="comment">
        {{#comment}}
        {{comment}}
        {{/comment}}{{^comment}}
        <em translate="yes">Unnamed</em>
        {{/comment}}
      </div>
      <div class="fingerprint">
        {{#valid}}
        {{fp}}
        {{/valid}}{{^valid}}
        <span translate="yes">Invalid key</span>
        {{/valid}}
      </div>
      <div class="action"><button data-raw="{{raw}}" class="btn btn-default btn-control-ct accounts-self-privileged account-remove-key fa fa-minus"/></div>
    </div>
    {{/keys}}
    {{^keys}}
    <div class="list-group-item">
      <div class="fingerprint">
        {{#empty}}
        <span translate="yes">There are no authorized public keys for this account.</span>
        {{/empty}}
        {{#denied}}
        <span translate="yes">You do not have permission to view the authorized public keys for this account.</span>
        {{/denied}}
        {{#failed}}
        <span translate="yes">Failed to load authorized keys.</span>
        {{/failed}}
      </div>
    </div>
    {{/keys}}
  </script>

  <div class="modal" id="add-authorized-key-dialog"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" translate="yes">Add public key</h4>
        </div>
        <div class="modal-body">
          <textarea id="authorized-keys-text" placeholder="Paste the contents of your public SSH key file here"
              class="form-control" translate="placeholder"></textarea>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" translate="yes" id="cancel-authorized-key" data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" translate="yes" id="add-authorized-key">Add key</button>
        </div>
      </div>
    </div>
  </div>

  <script id="role-entry-tmpl" type="x-template/mustache">
    {{#roles}}
    <div class="checkbox accounts-privileged">
      <label data-container="body" data-toggle="tooltip" data-original-title="Unix group: {{name}}" data-placement="right">
        <input type="checkbox" name="account-role-checkbox-{{id}}"
               data-gid="{{id}}" data-name="{{name}}"
               id="account-role-checkbox-{{id}}" {{#member}}checked{{/member}}/>
        {{desc}}
      </label>
    </div>
    {{/roles}}
    {{#changed}}
    <div class="pf-c-alert pf-m-info pf-m-inline" aria-label="inline info alert">
      <div class="pf-c-alert__icon">
          <i class="fa fa-info-circle" aria-hidden="true"></i>
      </div>
      <h4 translate="yes" class="pf-c-alert__title">The user must log out and log back in to fully change roles.</h4>
    </div>
    {{/changed}}
  </script>

</body>
